
<template>
  <div class="student-history">
    <div v-if="tasks&&tasks.length===0" class="d-flex justify-content-center"  style="">上个季度尚未开始学习任务</div>
    <div v-for="(item,i) in tasks" :key="i" class="p-2">
      <div class="student-history-item">
        <view class="d-flex task-quarter-header">
          <div class="mr-auto pl-2 ">{{item.year}}·{{item.quarter}}季度</div>
          <div class="d-flex  align-items-center mr-2">
            <img :src="'score-icon2.png'|imgUrl" class="score-icon2" />
            <span>得分: <span style="color:#ff790c">{{item.score}}</span>分</span>
          </div>
        </view>
        <div class="p-2">
          <div class="d-flex justify-content-around task-quarter-content p-2 text-center">
            <div style="width:33%">
              <h1 class="text-center pb-1" style="color:#E02020">{{item.completeNum}}</h1>
              <div >已完成</div>
            </div>
            <div class="border-left" style="width:33%">
              <h1 class="text-center pb-1">{{item.unCompleteNum}}</h1>
              <div>未完成</div>
            </div>
            <div class="border-left" style="width:33%">
              <h1 class="text-center pb-1">{{item.otherNum}}</h1>
              <div>其他</div>
            </div>
          </div>
        </div>
        <view class="d-flex justify-content-around align-items-center pb-2 mr-2 ml-2 task-quarter-footer">
          <div class="d-flex ">
            <span class="pr-1">师傅</span>
            <van-rate :value="item.teacherRate" @change="onRating(item,$event)" size="14" />
          </div>
          <div @click="toTasks(item.year,item.quarter)" class="custom-button-default ml-auto d-flex align-items-center justify-content-center" style="width:110px;height:32px;">
            查看详情
          </div>
        </view>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Prop, Component } from 'vue-property-decorator'
import { Getter, Action } from 'vuex-class'

@Component({
  filters: {}
})
export default class StudentHistory extends Vue {
  @Action getHistoryTaskAsync;
  public get tasks () {
    return this.$store.state.student.groups
      ? this.$store.state.student.groups.items
      : null
  }
  public get studentInfo () {
    return this.$store.state.student.studentInfo
  }

  public async created () {
    if (this.tasks === null) {
      await this.getHistoryTaskAsync()
    }
  }
  public onShow () {}

  public toTasks (year, quarter) {
    Megalo.navigateTo({
      url: '/student/pages/tasks/index?year=' + year + '&quarter=' + quarter
    })
  }
  public async onRating (item, event) {
    try {
      await this.$http.post({
        url: 'rating/toTeacher',
        data: {
          targetId: this.studentInfo.teacherId,
          year: item.year,
          quarter: item.quarter,
          score: event.detail
        }
      })
    } catch (error) {
      return
    }
    item.teacherRate = event.detail
    Megalo.showToast({
      title: '评分成功',
      icon: 'none',
      duration: 1000,
      mask: false
    })
  }
}
</script>

<style lang="stylus" scoped>

</style>
